<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab Three
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content #main overflow-scroll="true">


  <ion-fab vertical="bottom" horizontal="end" slot="fixed" style="width: 100px; margin-left: 10px;">
    <ion-fab-button>
      <ion-icon name="settings"></ion-icon>
    </ion-fab-button>
    <!-- 上方显示列表-->
    <ion-fab-list side="top">
      <ion-button (click)="onClick('lineitem')">lineitem </ion-button>

      <ion-button (click)="onClick('shipin')">视频</ion-button>
      <ion-button (click)="onClick('tx')">头像</ion-button>

    </ion-fab-list>
  </ion-fab>

  <div id="tx">
    <ion-label>这是头像：</ion-label>
    <ion-avatar class='center-h'>
      <img src={{imgpath}}>
    </ion-avatar>
  </div>

  <ion-item>
    <ion-thumbnail slot="end">
      <img src={{imgpath}}>
    </ion-thumbnail>
    <ion-label>这是缩略图 ：</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>这是原图：</ion-label>
  </ion-item>
  <ion-item>
    <img src="assets/img/aaa.jpg" on-swipe="onSwipeDown($event)">
  </ion-item>

  <ion-img-viewer *ngIf='showimg1' title="" alt="" text="" src="assets/img/aaa.jpg"></ion-img-viewer>

  <div class="voice" (click)="playSwitch()">
    <div id="mydiv" class="bg voicePause"></div>
  </div>
  <audio id="myaudio" src="assets/mp3File/醉雪 - 无涯.mp3" controls="controls" loop="false" hidden="true"></audio>
  <ion-label id="shipin">本地视频</ion-label>

  <vg-player class="video-container">
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>
    <vg-controls [vgAutohide]="true" [vgAutohideTime]="3">
      <vg-play-pause class="video-control-btn"></vg-play-pause>
      <!--暂停和恢复播放-->
      <vg-playback-button class="video-control-btn"></vg-playback-button>
      <!--倍速播放-->

      <vg-time-display class="video-control-btn" vgProperty="current" vgFormat="mm:ss"></vg-time-display>
      <vg-scrub-bar class="video-progress">
        <vg-scrub-bar-current-time [vgSlider]="true"></vg-scrub-bar-current-time>
        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
      </vg-scrub-bar>
      <!--<vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>-->
      <vg-time-display class="video-control-btn" vgProperty="total" vgFormat="mm:ss"></vg-time-display>
      <vg-mute class="video-control-btn"></vg-mute>
      <!--当前音量和静音之间切换-->
      <vg-quality-selector class="video-control-btn" [bitrates]="dashBitrates">
      </vg-quality-selector>
      <!--<vg-volume class="video-control-voice"></vg-volume>&lt;!&ndash;更改音量&ndash;&gt;-->
      <vg-fullscreen class="video-control-btn"></vg-fullscreen>
      <!--全屏和非全屏之间切换-->
    </vg-controls>
    <video #myMedia [vgMedia]="myMedia" id="my-video" height="200" preload="auto" poster="assets/img/icon_head.jpg"
      crossorigin playsinline webkit-playsinline>
      <source src="{{videoPath}}" type="video/mp4">
    </video>
  </vg-player>
  <ion-label>在线视频</ion-label>
  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="480"
    poster="jsp/video/video-js/my_video_poster.png" data-setup="{}">
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type='video/mp4' />
  </video>
  <ion-list>
    <ion-item>
      <ion-label>
        Item
      </ion-label>
    </ion-item>

    <ion-item lines="none" id="lineitem">
      <ion-label>
        No Lines Item
      </ion-label>
    </ion-item>

    <ion-item>
      <ion-label text-wrap>
        Multiline text that should wrap when it is too long to fit on one line in the item.
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-label text-wrap>
        <ion-text color="primary">
          <h3>H3 Primary Title</h3>
        </ion-text>
        <p>Paragraph line 1</p>
        <ion-text color="secondary">
          <p>Paragraph line 2 secondary</p>
        </ion-text>
      </ion-label>
    </ion-item>
    <ion-item lines="full">
      <ion-label>
        Item with Full Lines
      </ion-label>
    </ion-item>
    <ion-item lines="none">
      <ion-row>
        <ion-col size="4">123</ion-col>
        <ion-col size="4">1234123</ion-col>
        <ion-col size="4">1241551</ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="4">231234</ion-col>
        <ion-col size="4">12312</ion-col>
        <ion-col size="4">12551231223</ion-col>
      </ion-row>
    </ion-item>

    <ion-item>
      <ion-label>Awesome Label</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Label</ion-label>
      <ion-select placeholder="Select Pizza" [interfaceOptions]="{header: '部门'}" cancelText="关闭" okText="确认"
        (ionChange)="changePrice($event)">
        <ion-select-option value="peperoni">Peperoni</ion-select-option>
        <ion-select-option value="hawaii">Hawaii</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-list>
</ion-content>